<template>
  <view class="image-upload-container">
    <view class="upload-list">
      <view 
        v-for="(item, index) in imageList" 
        :key="index"
        class="image-item"
      >
        <image 
          :src="item.url" 
          mode="aspectFill" 
          class="uploaded-image"
          @click="previewImage(index)"
        />
        <view 
          v-if="showDelete" 
          class="delete-btn"
          @click="deleteImage(index)"
        >
          <text class="delete-icon">✕</text>
        </view>
      </view>
      
      <view 
        v-if="imageList.length < maxCount"
        class="upload-btn"
        @click="chooseImage"
      >
        <text class="upload-icon">+</text>
        <text class="upload-text">{{ uploadText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

// 定义 props
const props = defineProps({
  // 最大上传数量
  maxCount: {
    type: Number,
    default: 9
  },
  // 是否显示删除按钮
  showDelete: {
    type: Boolean,
    default: true
  },
  // 上传按钮文字
  uploadText: {
    type: String,
    default: '上传图片'
  },
  // 默认图片列表
  defaultImages: {
    type: Array,
    default: () => []
  }
})

// 定义 emits
const emit = defineEmits(['change', 'error'])

// 响应式数据
const imageList = ref(props.defaultImages.map(url => ({ url })))

// 监听默认图片变化
watch(
  () => props.defaultImages,
  (newVal) => {
    imageList.value = newVal.map(url => ({ url }))
  },
  { immediate: true }
)

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: props.maxCount - imageList.value.length,
    success: (res) => {
      const newImages = res.tempFilePaths.map(path => ({ url: path }))
      imageList.value = [...imageList.value, ...newImages]
      emit('change', imageList.value)
    },
    fail: (err) => {
      console.error('选择图片失败:', err)
      emit('error', err)
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  imageList.value.splice(index, 1)
  emit('change', imageList.value)
}

// 预览图片
const previewImage = (index) => {
  const urls = imageList.value.map(item => item.url)
  uni.previewImage({
    urls,
    current: index
  })
}
</script>

<style scoped>
.image-upload-container {
  padding: 20rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #dd524d;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delete-icon {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
}

.upload-btn:active {
  background-color: #f0f0f0;
}

.upload-icon {
  font-size: 60rpx;
  color: #ccc;
  line-height: 1;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
</style>